<template>
	<div id="container">
		<div id="chinaMap"></div>
		<!-- <div id="chinaCookie"></div> -->
		<div id="chinaColumn"></div>
	</div>

</template>

<script>
	require('../../plugins/china.js')
	import testData from './chinaIchFakeData.js'

	export default {
		data() {
			return {
				data: [],
			}
		},
		created() {},
		mounted() {
			this.getChinaIchInfo();
			// this.initEcharts();  // 调整至获取数据后执行
		},
		methods: {
			/**
			 * 初始化ECharts
			 */
			initEcharts() {
				this.drawMap();
				this.drawColumn();
				// 使用刚指定的配置项和数据显示地图数据
				this.chinachart.setOption(this.chartOption);
				this.chinaColumnChart.setOption(this.chartColumnOption);
				
				// 设置点击事件
				var _this = this;
				this.chinachart.on('click', function(event) {
					// console.log("this.data" , _this.data)
					// console.log(event);
					// alert(event.data.name + "  跳转至  " + event.data.province)
					_this.$router.push({
						name: "province",
						params:{
							provinceId: event.data.province
						}
					})
				});
				this.chinaColumnChart.on('click', function(event) {
					var that = this;
					// console.log(event)
					// console.log(_this.data[_this.data.length - event.dataIndex - 1]);
					// alert(_this.data[_this.data.length - event.dataIndex - 1].name + "  跳转至  " + _this.data[_this
					// 	.data.length - event.dataIndex - 1].province);
					_this.$router.push({
						name: "province",
						params:{
							provinceId: _this.data[_this.data.length - event.dataIndex - 1].province
						}
					})
				});
			},
			/**
			 * 获取数据
			 */
			async getChinaIchInfo() {
				try {
					const res = await this.$http.get(`${this.HOST}/ich/chinaInfo`, {
					});
					var data = res.data;
					console.log("res.data=", res.data);
					if (data.code == 1) {
						// 返回成功
						// data.data = data.data.sort(function(a, b) {
						// 	return b.value - a.value;
						// })
						this.data = data.data;
						// console.log(this.data)
						this.initEcharts();
					} else {
						// 返回失败
						this.$message({
							$message: data.message,
							type: "error"
						});
					}
				} catch (err) {
					this.$message({
						message: "请求发送失败！将使用测试数据",
						type: "error"
					});
					console.log("err", err);
					// 使用测试数据
					this.data = testData.chinaICHData;
					this.data = this.data.sort(function(a, b) {
						return b.value - a.value;
					})
					this.initEcharts();
				}
			},
			/**
			 * 绘制地图
			 */
			drawMap() {
				// 初始化echarts实例
				this.chinachart = this.$echarts.init(document.getElementById('chinaMap'))
				// 进行相关配置
				this.chartOption = {
					title: {
						left: 'center',
						top: 10,
						text: "全国国家级非遗分布图",
						textStyle: {
							color: 'rgb(179, 239, 255)',
							fontSize: 20,
						},
					},
					toolbox: {
						feature: {
							restore: {
								show: true,
							},
						},
						iconStyle: {
							borderColor: '#dadada',
						},
						top: 15,
						right: 35,
					},
					tooltip: {
						// 鼠标移到图里面的浮动提示框
						trigger: 'item',
						backgroundColor: 'rgba(0,0,0,0.5)',
						textStyle: {
							color: "#fff",
							fontSize: 12
						},
						formatter(params, ticket, callback) {
							// params.data 就是series配置项中的data数据遍历
							let localValue;
							if (params.data) {
								localValue = params.data.value;
							} else { // 为了防止没有定义数据的时候报错写的
								localValue = 0;
							}
							let htmlStr = `
			          <div> ${params.name}<br />
					  非遗数量：${localValue}件
					  </div>
			        `
							return htmlStr
						},
					},
					visualMap: { // 左下角的颜色区域
						type: 'continuous', // 定义为分段型 visualMap
						min: this.data[this.data.length - 1].value,
						max: this.data[0].value,
						left: '3%',
						bottom: '5%',
						calculable: true,
						// seriesIndex: [0],
						inRange: {
							color: ['#24CFF4', '#2E98CA', '#1E62AC'],
						},
						textStyle: {
							color: '#24CFF4',
						},

					},
					geo: { // 地理坐标系组件用于地图的绘制
						map: 'china', // 表示中国地图
						roam: true, // 是否开启鼠标缩放和平移漫游
						zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
						label: {
							show: true,
							color: 'rgb(249, 249, 249)', //省份标签字体颜色
							formatter: (p) => {
								switch (p.name) {
									case '内蒙古自治区':
										p.name = '内蒙古';
										break;
									case '西藏自治区':
										p.name = '西藏';
										break;
									case '新疆维吾尔自治区':
										p.name = '新疆';
										break;
									case '宁夏回族自治区':
										p.name = '宁夏';
										break;
									case '广西壮族自治区':
										p.name = '广西';
										break;
									case '香港特别行政区':
										p.name = '香港';
										break;
									case '澳门特别行政区':
										p.name = '澳门';
										break;
								}
								return p.name;
							},
						},
						emphasis: {
							label: {
								show: true,
								color: '#f75a00',
							},
							itemStyle: {
								areaColor: '#8dd7fc',
								borderWidth: 1.6,
								shadowBlur: 25,
							}
						},
						itemStyle: { // 地图区域的多边形 图形样式。
							areaColor: '#24CFF4',
							borderColor: '#53D9FF',
							borderWidth: 1.3,
							shadowBlur: 15,
							shadowColor: 'rgb(58,115,192)',
							shadowOffsetX: 3,
							shadowOffsetY: 2,

						},
					},

					series: [{
						name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
						type: 'map',
						geoIndex: 0,
						// 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
						data: this.data
					}]
				}
			},
			/**
			 * 绘制柱状图
			 */
			drawColumn() {
				var xData = [],
					yData = [];
				this.data.forEach((item) => {
					xData.unshift(item.value);
					yData.unshift(item.name)
				})
				// 初始化echarts实例
				this.chinaColumnChart = this.$echarts.init(document.getElementById('chinaColumn'))
				this.chartColumnOption = {
					title: {
						left: 'center',
						top: 10,
						text: "全国国家级非遗排行榜",
						textStyle: {
							color: 'rgb(179, 239, 255)',
							fontSize: 20,
						},
						subtext: '数据来自网络',
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						scale: true,
						position: 'top',
						splitLine: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#88b5eb'
							}
						},
						axisTick: {
							show: true
						},
						axisLabel: {
							margin: 10,
							color: '#c0e6f9'
						},
					},
					yAxis: {
						type: 'category',
						nameGap: 20,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							interval: 0,
							color: '#f9f9f9'
						},
						data: yData,
					},
					series: [{
						name: '非遗',
						type: 'bar',
						data: xData,
						itemStyle: {
							color: '#31baef',
							borderCap: 'square',
						},
					}],

				}
			},
		}
	}
</script>

<style lang="less" scoped>
	#container {
		// padding-top: 20px;
		height: 90%;
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: center;

		#chinaMap {
			// border: white solid 2px;
			height: 500px;
			width: 850px;

		}

		#chinaColumn {
			// border: white solid 2px;
			height: 500px;
			width: 350px;
		}
	}

	#tip {
		color: red;
	}
</style>
